<template>
  <view class="personalInformation">
    <view class="list">
      <view style="color: #999; font-size: 28rpx"> 头像 </view>
      <view style="padding-top: 2rpx" class="flexrow">
        <onlyupload :url="userinfo.headImage" @upload="upload">
          <!-- <image style="width: 80rpx;height: 80rpx;border-radius: 50%;" src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/logo.png"></image> -->
        </onlyupload>
        <image
          style="width: 32rpx; height: 32rpx; margin-bottom: 20rpx"
          src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/jiantou.png"
        >
        </image>
      </view>
    </view>
    <view class="list">
      <view style="color: #999; font-size: 28rpx"> 昵称 </view>
      <view style="display: flex; font-size: 28rpx">
        <input
          style="text-align: right; font-size: 28rpx"
          v-model="userinfo.nikeName"
          @blur="nicknameblur"
        />
        <!-- <span style="margin-left: 20rpx;color: #3FA3FA;margin-top: 0rpx;" @click="edituserinfo">修改</span> -->
      </view>
    </view>
    <view class="list">
      <view style="color: #999; font-size: 28rpx"> 绑定手机号 </view>
      <view
        style="display: flex; font-size: 28rpx; align-items: center"
        @click="jump"
      >
        <view>{{ userinfo.account || "" }}</view>
        <image
          style="width: 32rpx; height: 32rpx"
          src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/jiantou.png"
        >
        </image>
      </view>
    </view>
  </view>
</template>

<script>
import onlyupload from "../../component/onlyupload.vue"
import { getLoginUserMessgae, updateUserMessage } from "../../api/index.js"
export default {
  components: {
    onlyupload
  },
  data() {
    return {
      name: "张丹",
      image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F64%2F9b%2F86%2F649b86bf87b4c0516a2cf058b8c19022.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656231832&t=87914794999aae41ff8e63fc5a63eff7',
      userinfo: {
        nikeName: '用户'
      }
    }
  },
  onLoad() {
    this._getLoginUserMessgae()
  },
  methods: {
    //获取个人信息
    _getLoginUserMessgae() {
      getLoginUserMessgae().then(res => {
        this.userinfo = res.data
        if (!res.data.nickName) {
          this.userinfo.nikeName = '用户'
        } else {
          this.userinfo.nikeName = res.data.nickName
        }
        if (this.userinfo.headImage) {
          this.userinfo.headImage = this.$store.state.chronic.baseUrl + this.userinfo.headImage
        }
      })
    },
    //修改手机号
    jump() {
      uni.navigateTo({
        url: 'replacePhone'
      })
    },
    //修改头像
    upload(e) {
      console.log('头像', e)
      updateUserMessage({
        headImage: e
      }).then(res => {
        if (res.code == 200) {
          this._getLoginUserMessgae()
          this.$toast('头像修改成功')
        }
      })
    },
    nicknameblur(e) {
      console.log(e.detail.value)
      updateUserMessage({
        nikeName: e.detail.value
      }).then(res => {
        if (res.code == 200) {
          this._getLoginUserMessgae()
          this.$toast('昵称修改成功')
        }
      })
    },
    //修改昵称
    // edituserinfo(){
    // 	updateUserMessage({
    // 		nikeName:this.userinfo.nikeName
    // 	}).then(res=>{
    // 		if(res.code==200){
    // 			this._getLoginUserMessgae()
    // 			this.$toast('昵称修改成功')
    // 		}
    // 	})
    // }
  }
}
</script>

<style lang="scss">
.personalInformation {
  .list {
    height: 104rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 4rpx solid #f7f7f7;
    margin: 0 40rpx;
  }
}
</style>
